import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';
import 'package:get/get_connect/http/src/utils/utils.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/utils/routes.dart';
import 'package:sports_new/utils/toast_utils.dart';
import 'package:sports_new/utils/user.dart';
import 'package:sports_new/utils/widget_utils.dart';
import 'package:sports_new/view/my/widgets/my_appbar.dart';

import '../../utils/utils.dart';
import '../../widgets/base/qkd_text.dart';

class MyNameEditPage extends StatefulWidget {
  const MyNameEditPage({super.key});

  @override
  State<MyNameEditPage> createState() => _MyNameEditPageState();
}

class _MyNameEditPageState extends State<MyNameEditPage> {
  final tec = TextEditingController();

  int get calTextLen => () {
        int len = 0;
        for (String ch in tec.text.characters) {
          if (isPlainAscii(ch)) {
            len += 1;
          } else {
            len += 2;
          }
        }
        return len;
      }.call();

  Future tapComplete() async {
    final len = calTextLen;
    if (len > 10) {
      return;
    }
    final r = await User.nameUpdate(tec.text);
    if (r ?? false) Get.back();
  }

  bool alert = false;

  validText() {
    if (calTextLen > 10 && !alert) {
      alert = true;
      update();
    }
    if (calTextLen <= 10 && alert) {
      alert = false;
      update();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colours.scaffoldBg,
      appBar: MyAppBar(
        title: "设置昵称",
        actions: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const QkdText("完成",
                      color: Colours.main,
                      fontSize: 16,
                      fontWeight: FontWeight.w500)
                  .tap(tapComplete),
            ],
          ).tap(() {}).marginOnly(right: 16)
        ],
      ),
      body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        editor(),
        Container(
          alignment: Alignment.centerLeft,
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: const QkdText("普通用户90天可修改1次昵称，请谨慎提交",
              color: Colours.grey99, fontSize: 12),
        ),
        if (alert)
          Row(
            children: [
              Image.asset(Utils.getImgPath("planinfo_alert.png"), width: 15),
              Container(width: 2),
              const QkdText("超出字数限制，请修改", color: Colours.main, fontSize: 12)
            ],
          ).paddingOnly(left: 16, top: 5),
        vipRight()
      ]),
    );
  }

  Widget editor() => cell(
          child: TextFormField(
        // decoration: BoxDecoration(border: Border.all(width: 0,style: BorderStyle.none)),
        decoration: const InputDecoration(
            hintText: "请输入昵称（10个字符以内）",
            hintStyle: TextStyle(color: Colours.grey99),
            border: InputBorder.none,
            contentPadding: EdgeInsets.zero),
        controller: tec,
        onChanged: (value) {
          validText();
        },
        maxLines: 1,
      ));

  Widget vipRight() => cell(
          child: GestureDetector(
        onTap: () => Get.toNamed(Routes.vipCenter),
        child: Row(
          children: [
            const QkdText("会员3天可修改1次"),
            Expanded(
              child: const QkdText(
                "开通会员",
                textAlign: TextAlign.right,
                maxLines: 2,
                color: Colours.goldD6A864,
              ).marginSymmetric(horizontal: 8),
            ),
            Image.asset(Utils.getImgPath("icon_arrow_right.png"),
                width: 6, height: 10, color: Colours.goldD6A864)
          ],
        ).paddingSymmetric(vertical: 15),
      ));

  Widget cell({required Widget child}) => Container(
        margin: const EdgeInsets.all(8),
        padding: const EdgeInsets.symmetric(horizontal: 12),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8), color: Colors.white),
        child: child,
      );
}
